import React, { useEffect } from 'react';
import { connect, history } from 'umi';
import { Form, Input, Select, Row, Col, Button } from 'antd';
import { genderOptions, positionOptions } from '@/consts/options';

const AuthRegister = (props) => {
    const { dispatch } = props;
    const [form] = Form.useForm();

    const handleSubmit = async () => {
        const values = await form.validateFields();
        console.log('values', values)
    };

    return <>
        <Form form={form}>
            <Form.Item
                name='email'
                rules={[
                    { required: true, message: '必填项' },
                    { pattern: /^([A-Za-z0-9_\-\.\u4e00-\u9fa5])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,8})$/, message: '邮箱格式不正确' }
                ]}
            >
                <Input placeholder='邮箱' size='large' />
            </Form.Item>
            <Form.Item style={{ marginBottom: 0 }}>
                <Row gutter={10}>
                    <Col span={12}>
                        <Form.Item>
                            <Input placeholder='名字' size='large' />
                        </Form.Item>
                    </Col>
                    <Col span={12}>
                        <Form.Item>
                            <Input placeholder='姓氏' size='large' />
                        </Form.Item>
                    </Col>
                </Row>
            </Form.Item>
            <Form.Item style={{ marginBottom: 0 }}>
                <Row gutter={10}>
                    <Col span={12}>
                        <Form.Item>
                            <Select options={genderOptions} placeholder='性别' size='large' />
                        </Form.Item>
                    </Col>
                    <Col span={12}>
                        <Form.Item>
                            <Select options={positionOptions} placeholder='职位' size='large' />
                        </Form.Item>
                    </Col>
                </Row>
            </Form.Item>
            <Form.Item
                name='password'
                rules={[{ required: true, message: '必填项' }]}
            >
                <Input type='password' placeholder='密码' size='large' />
            </Form.Item>
            <Form.Item
                name='password1'
                rules={[{ required: true, message: '必填项' }]}
            >
                <Input type='password' placeholder='确认密码' size='large' />
            </Form.Item>
            <Form.Item>
                <Button style={{ width: '100%' }} size='large' type='primary' onClick={handleSubmit}>立即注册</Button>
            </Form.Item>
        </Form>
        <div className='footer_area'>
            <a onClick={() => history.push('/auth/login')}>{`->已有账号，直接登录`}</a>
        </div>
    </>
};

export default connect(({ auth }) => ({
    auth,
}))(AuthRegister);